<template>
  <!-- rank 排行 页面 -->
  <div class="rank" ref="rank">
    <scroll class="toplist" ref="scroll" :data="topList" :bounceTop="false">
      <div class="toplist-contain">
        <div class="topitem-wrapper">
          <div class="title">官方榜单</div>
          <ul class="topitem-contain">
            <li class="topitem" v-for="(item, index) in officialList" :key="index" @click="selectItem(item)">
              <div class="left">
                <img width="100" height="100" v-lazy="item.coverImgUrl + '?param=256x256'" />
                <div class="shadow">{{ item.updateFrequency }}</div>
              </div>
              <ul class="right">
                <li class="song" v-for="(song, index) in item.tracks" :key="index">
                  <span>{{ index + 1 }}.</span>
                  <span> {{ song.first }}-{{ song.second }}</span>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div v-for="(rank, temp) in ranks" :key="temp">
          <div class="line"></div>
          <div class="topitem-wrapper">
            <div class="title">{{ rank.title }}</div>
            <div class="topitem-row">
              <div class="icon" v-for="(item, index) in rank.list" :key="index" @click="selectItem(item)">
                <div class="top">
                  <img width="90" height="90" v-lazy="item.coverImgUrl + '?param=256x256'" />
                  <div class="shadow">{{ item.updateFrequency }}</div>
                </div>
                <div class="bottom">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
      <div class="loading-container" v-show="!topList.length">
        <loading></loading>
      </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>
<script>
import Scroll from '@/components/scroll/scroll';
import Loading from '@/components/loading/loading';
import { getTopList } from 'api/rank.js';
import { playlistMixin } from 'common/js/mixin';
import { mapMutations } from 'vuex';

export default {
  mixins: [playlistMixin],
  components: { Scroll, Loading },
  data() {
    return {
      topList: [],
    };
  },
  computed: {
    // 官方排行
    officialList() {
      let res = [];
      this.topList.forEach((item) => {
        if (this.officialRankingIds.includes(item.id)) {
          res.push(item);
        }
      });
      return res;
    },
    ranks() {
      let res = [];
      this.AllRankIds.forEach((item) => {
        let obj = {};
        obj.title = item.title;
        obj.list = [];
        this.topList.forEach((top) => {
          if (item.ids.includes(top.id)) {
            obj.list.push(top);
          }
        });
        res.push(obj);
      });
      return res;
    },
  },
  created() {
    this.AllRankIds = [
      { title: '精选榜', ids: [5453912201, 5338990334] },
      {
        title: '曲风榜',
        ids: [991319590, 71384707, 1978921795, 71385702, 10520166, 5059633707, 5059642708, 5059661515],
      },
      {
        title: '全球榜',
        ids: [745956260, 180106, 60198, 11641012, 60131, 2809513713, 2809577409, 27135204, 5059644681],
      },
      { title: '特色榜', ids: [3812895, 21845217, 3112516681] },
    ];
    // 官方榜单
    this.officialRankingIds = [19723756, 3779629, 2884035, 3778678];
    this._getTopList();
  },
  methods: {
    ...mapMutations(['setAlbum']),
    selectItem(item) {
      console.log('item', item);
      this.setAlbum({ id: item.id, name: item.name, avatar: item.coverImgUrl });
      this.$router.push({ path: `/rank/${item.id}` });
    },
    _getTopList() {
      getTopList().then((res) => {
        this.topList = res.list;
      });
    },
    handlePlaylist(playlisy) {
      const bottom = playlisy.length > 0 ? '60px' : '';
      this.$refs.rank.style.bottom = bottom;
      this.$refs.scroll.refresh();
    },
  },
};
</script>
<style scoped lang="stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"

.line
  height: 10px;
  width: 100%;
.rank
  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;
  .toplist
    overflow: hidden;
    height: 100%;

.topitem-row
  display flex
  flex-wrap: wrap;
  .icon
    width: 33.3%;
    padding: 0 10px;
    box-sizing: border-box;
    .top
      height: 90px;
      position: relative;
      margin-bottom: 4px;
      img
        width: 100%;
        height: 100%;
        border-radius 15px
    .bottom
      word-wrap:break-word
      font-size: $font-size-medium
      margin-bottom: 10px;
      color $color-text-ll

.topitem-wrapper
  background-color $color-highlight-background
  margin: 0 20px 0;
  padding: 0 10px;
  border-radius 10px
  height: 100%;
  .title
    font-size $font-size-large-x
    color $color-theme
    padding: 10px 0;
  .topitem-contain
    .topitem
      display flex
      padding-bottom 10px
      .left
        width: 100px;
        height: 100px;
        border-radius 5px
        position: relative;
        img
          border-radius 15px
      .right
        padding  0 20px
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: $color-text-d
        font-size: $font-size-small
        overflow: hidden;
        no-wrap()
        .song
          flex 1
          display: flex;
          align-items center
          no-wrap()
          width: 100%;
.shadow
  position absolute
  bottom 0
  background-color: rgba(0,0,0,.4);;
  left: 0;
  right: 0;
  border-radius: 0 0 15px 15px;
  width: 100%;
  line-height $font-size-large-x
  font-size $font-size-medium
  color $color-text-ll
  text-align center
</style>
